<template>
    <div>
        <el-row>
            <el-col :span="4">
                <div id="titleHeader"><span>易订货</span><span>订货系统</span></div>
            </el-col>
            <el-col :span="12" :offset="8">
                <div id="navHeader">
                    <el-menu class="el-menu-demo" mode="horizontal"  router :default-active="topNavActive">
                        <el-menu-item
                                v-for="(item,index) in cartNavData"
                                :key="index"
                                :index=item.path
                                @click="getRouter(item.path,item.name)"
                        >
                            <i :class=item.iconName style="color: #00B8D2"></i>
                            <span slot="title">{{item.name}}</span>
                        </el-menu-item>
                        <el-submenu index="/Main/Message">
                            <template slot="title">
                                <i class="el-icon-s-comment" style="color: #00B8D2"></i>
                                <el-badge :value="comMessageNum" :max="99" class="item">
                                    <span>消息</span>
                                </el-badge>
                            </template>
                            <el-menu-item
                                    v-for="(item,index) in messageNavDataFun"
                                    :key="index"
                                    :index=item.path
                                    @click="getRouter(item.path,item.name)"
                            >
                                <div>
                                    <span slot="title">{{item.name}}</span>
                                    <span>(</span>
                                       <span style="color: #FF0000">{{item.num}}</span>
                                    <span>)</span>
                                </div>
                            </el-menu-item>
                        </el-submenu>
                        <el-submenu index="3">
                            <template slot="title">
                                <i class="el-icon-s-custom" style="color: #FA552C"></i>
                                <span>{{username}}</span>
                            </template>
                            <el-menu-item
                                    v-for="(item,index) in myNavData"
                                    :key="index"
                                    :index=item.path
                                    @click="getRouter(item.path,item.name)"
                            >
                                <span slot="title">{{item.name}}</span>
                            </el-menu-item>
                            <el-menu-item index="/Login" @click="outLoginFun">
                                <span slot="title" >退出</span>
                            </el-menu-item>
                        </el-submenu>
                        <el-submenu index="/Main/Set">
                            <template slot="title">
                                <i class="el-icon-s-tools" style="color: #09B488"></i>
                                <span>设置</span>
                            </template>
                            <el-menu-item
                                    v-for="(item,index) in setNavData"
                                    :key="index"
                                    :index=item.path
                                    @click="getRouter(item.path,item.name)"
                            >
                                <span slot="title">{{item.name}}</span>
                            </el-menu-item>
                        </el-submenu>
                        <el-menu-item @click="topUpVisible = true">
                            <i class="el-icon-phone" style="color: #00B8D2"></i>
                            <span>反馈</span>
                        </el-menu-item>
                    </el-menu>
                </div>
            </el-col>
        </el-row>
        <el-dialog
                title="消息反馈"
                :visible.sync="topUpVisible"
                width="30%"
                center>
            <div style="width: 80%;margin: 0 auto;">
                <el-row class="topUpElRow">
                    <el-col :span="24"><el-input v-model="feedback.name" placeholder="怎么称呼您"></el-input></el-col>
                </el-row>
                <el-row class="topUpElRow">
                    <el-col :span="24"><el-input v-model="feedback.phone" placeholder="请留下您的手机号码"></el-input></el-col>
                </el-row >
                <el-row class="topUpElRow">
                    <el-col :span="24"><el-input v-model="feedback.verificationCode" placeholder="验证码"></el-input></el-col>
                </el-row>
                <el-row class="topUpElRow">
                    <el-col :span="24">
                        <el-input type="textarea" :rows="3" placeholder="请输入内容" v-model="feedback.message"/>
                    </el-col>
                </el-row>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="topUpConfirm" >确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    import {mapActions,mapGetters} from 'vuex'
    export default {
        name: "Header",
        data() {
            return {
                messageNavData:[],//数据来源于vuex
                myNavData:[
                    {path:'/Main/MyAccount',name:'我的账号'},
                ],
                setNavData:[
                    {path:'/Main/Set/CompanyInformation',name:'公司信息'},
                    {path:'/Main/Set/ReceivingInformation',name:'收货信息管理'},
                    {path:'/Main/Set/OperationLog',name:'操作日志'},
                    {path:'/Main/Set/SharingSettings',name:'分享设置'},
                ],
                cartNavData:[
                    {path:'/Main/Goods/GoodsCart',iconName: 'el-icon-shopping-cart-2',name:'购物车'},
                ],
                messageNum:0,
                topUpVisible:false,
                feedback:{
                    name:'',
                    phone:'',
                    verificationCode:'',
                    message:''
                }
            };
        },
        methods: {
            ...mapActions(['routerFun','userOperationFun']),
            ...mapGetters(['getNowTime','getUserName']),
            getRouter(path,name) {
                let obj = {path,name}
                this.routerFun(obj)
            },
            outLoginFun(){
                this.$store.state.userOperation.content = '退出登录'
                this.$store.state.userOperation.user = this.getUserName()
                this.$store.state.userOperation.operation = '用户退出登录'
                this.$store.state.userOperation.createDate = this.getNowTime()
                this.userOperationFun(this.$store.state.userOperation)
                sessionStorage.removeItem('token')
                this.$store.state.getRouter.myRouter = [{path:'/Main/Home',iconName:'el-icon-house',name:'首页'}]
                sessionStorage.setItem('myRouter','')
            },
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {});
            },
            addMessageNumFun(){
                let num = this.messageNavData.map(item=>{
                    return item.num
                })
                for(let value of num){
                    this.messageNum += value
                }
                return this.messageNum
            },
            //反馈提交
            topUpConfirm(){
                this.topUpVisible = false
            }
        },
        computed: {
            username(){
                return this.getUserName()
            },
            topNavActive: {
                get: function () {
                    let arr = this.$route.path.split('/');
                    switch (arr[3]) {
                        case 'ServiceMessage':
                            return '/Main/Message'
                        case 'SystemNotice':
                            return '/Main/Message'
                        case 'UpgradeAnnouncement':
                            return '/Main/Message'
                        case 'CompanyInformation':
                            return '/Main/Set'
                        case 'OperationLog':
                            return '/Main/Set'
                        case 'ReceivingInformation':
                            return '/Main/Set'
                        case 'SharingSettings':
                            return '/Main/Set'
                    }
                },
            },
            set: function () {
            },
            comMessageNum(){
                this.messageNum = this.addMessageNumFun()
                return this.messageNum
            },
            messageNavDataFun(){
                this.messageNavData = this.$store.state.messageNavData
                return this.messageNavData
            },
        },
    }
</script>

<style scoped lang="less">
   #titleHeader{
        width: 100%;
        height: 60px;
        line-height: 60px;
        text-align: center;
        color: #555555;
        font-size: 18px;
    }
   #titleHeader>span:nth-child(2){
       margin-left: 10px;
   }
   #navHeader{
       width: 100%;
       height: 58px;
       .el-menu{
           height: 58px;
           i{
               font-size: 22px;
           }
           .el-menu-item:hover,.el-submenu:hover{
               background-color: #cccccc;
           }
       }
   }
   .item{
       height: 30px;
       line-height: 30px;
    }
   .topUpElRow{
       margin-top: 10px;
   }

</style>